<template>
  <transition name="el-zoom-in-center">
    <div class="historicalRecord">
      <div class="title">城乡房屋安全核查表</div>
      <div class="List" v-for="(item1, index1) in ListData1" :key="index1">
        <div class="List-icon" @click="handleUp(item1)">
          <van-icon name="arrow-up" color="#007AFF" style="padding-top: 6px" v-if="item1.isActive" />
          <van-icon name="arrow-down" color="#007AFF" style="padding-top: 6px" v-else />
          <div class="splitLine" v-if="item1.isActive" :style="{ height: heights }"></div>
        </div>
        <div class="List-title">
          时间:{{ item1.XCSJ ? item1.XCSJ : '暂无数据' }}&nbsp;&nbsp; 类型:{{ item1.Type }}&nbsp;&nbsp; 巡查员:{{
            item1.XCR
          }}&nbsp;&nbsp; 巡查结论:{{ item1.CBJD == 372 ? '基本安全' : '存在风险' }}
        </div>
        <transition name="el-zoom-in-center">
          <div class="List-Data" v-if="item1.isActive" ref="ListDatas">
            <div class="content" v-for="(its, ind) in item1.List" :key="ind">
              <p>{{ its.name }}</p>
              <div v-for="(item2, index2) in its.children" :key="index2">
                <van-field name="radio" v-if="item2.name1 != 'QTWT'" :label="item2.name1">
                  <template #input>
                    <van-radio-group v-model="item1[item2.value]" direction="horizontal" v-if="item2.Checkbox">
                      <van-radio v-for="(item3, index3) in item2.children" :key="index3" :name="item3.value">{{
                        item3.key
                      }}</van-radio>
                    </van-radio-group>
                    <span v-else>{{ item1[item2.value] }}</span>
                    <van-uploader v-if="its.name == '照片'" />
                  </template>
                </van-field>
                <van-field name="radio" v-if="item2.name1 == 'QTWT'" :label="item1[item2.name1]"> </van-field>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <div class="List" v-for="(item, index) in DeepListData" :key="index + '-only3'">
        <div class="List-icon" @click="handleUp(item)">
          <van-icon name="arrow-up" color="#007AFF" style="padding-top: 6px" v-if="item.isActive" />
          <van-icon name="arrow-down" color="#007AFF" style="padding-top: 6px" v-else />
          <div class="splitLine" v-if="item.isActive" :style="{ height: heights }"></div>
        </div>
        <div class="List-title">
          时间:{{ item.PCSJ ? item.PCSJ : '暂无数据' }}&nbsp;&nbsp; 类型:{{ item.JGLX == 1 ? '' : '' }}&nbsp;&nbsp;
          排查员:{{ item.PCR ? item.PCR : '暂无数据' }}&nbsp;&nbsp; 巡查结论:{{
            item.CBPD == 1 ? '基本安全（甲类、乙类）' : '存在安全隐患（丙类、需要安全鉴定）'
          }}
        </div>
        <transition name="el-zoom-in-center">
          <div class="List-Data" v-show="item.isActive" ref="ListDatas">
            <div class="content" v-for="(its, ind) in item.List" :key="ind + '-only1'">
              <p v-if="its.isL">{{ its.name }}</p>
              <div v-for="(item2, index2) in its.children" :key="index2 + '-only2'">
                <van-field name="radio" :label="item2.name1" v-if="its.isL">
                  <template #input>
                    <van-radio-group v-model="item[item2.value]" direction="horizontal">
                      <van-radio
                        v-for="(item1, index1) in item2.children"
                        :key="index1 + 1 + '-only'"
                        :name="item1.value"
                        >{{ item1.key }}</van-radio
                      >
                    </van-radio-group>
                    <!-- <span v-else>{{ item[item2.value] }}</span>
                    <van-uploader v-if="its.name == '照片'" /> -->
                  </template>
                </van-field>
                <van-field name="radio" v-else :label="item2.name1">
                  <template #input
                    ><span>{{ item[item2.value] }}</span></template
                  >
                </van-field>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </transition>
</template>

<script>
import { QuerySignCallback } from '@/utils/api'
export default {
  data() {
    return {
      activeNames: [1],
      tableData: [
        {
          titleData: '',
        },
      ],
      show3: true,
      ListDataS1: [
        {
          name: '房屋用途：',
          children: [
            {
              name1: '房屋用途变化：',
              value: 'FWYTBH',
              Checkbox: true,
              children: [
                {
                  value: '0',
                  key: '否',
                },
                {
                  value: '1',
                  key: '是',
                },
              ],
            },
            {
              name1: '房屋用途：',
              value: 'FWYT',
              Checkbox: false,
            },
          ],
        },
        {
          name: '改扩建情况：',
          children: [
            {
              name1: '是否改扩建：',
              value: 'GKJ',
              Checkbox: true,
              children: [
                {
                  value: '0',
                  key: '否',
                },
                {
                  value: '1',
                  key: '是',
                },
              ],
            },
            {
              name1: '改扩建内容：',
              value: 'GKJNR',
              Checkbox: false,
            },
          ],
        },
        {
          name: '现场状况：',
          children: [
            {
              name1: '受重大工程施工影响：',
              value: 'ZDSGYX',
              Checkbox: true,
              children: [
                {
                  value: '0',
                  key: '否',
                },
                {
                  value: '1',
                  key: '是',
                },
              ],
            },
            {
              name1: '周围山体边坡坍塌：',
              value: 'STBPTX',
              Checkbox: true,
              children: [
                {
                  value: '0',
                  key: '否',
                },
                {
                  value: '1',
                  key: '是',
                },
              ],
            },
            {
              name1: '房屋倾斜、局部倒塌：',
              value: 'QXDT',
              Checkbox: true,
              children: [
                {
                  value: '0',
                  key: '否',
                },
                {
                  value: '1',
                  key: '是',
                },
              ],
            },
            {
              name1: '墙体拆除、歪斜：',
              value: 'QTCC',
              Checkbox: true,
              children: [
                {
                  value: '0',
                  key: '否',
                },
                {
                  value: '1',
                  key: '是',
                },
              ],
            },
            {
              name1: '梁板柱歪斜、开裂：',
              value: 'LBZCC',
              Checkbox: true,
              children: [
                {
                  value: '0',
                  key: '否',
                },
                {
                  value: '1',
                  key: '是',
                },
              ],
            },
            {
              name1: '钢筋裸露、锈蚀：',
              value: 'GJLL',
              Checkbox: true,
              children: [
                {
                  value: '0',
                  key: '否',
                },
                {
                  value: '1',
                  key: '是',
                },
              ],
            },
            {
              name1: '防控危房有人居住：',
              value: 'FKWFJZ',
              Checkbox: true,
              children: [
                {
                  value: 0,
                  key: '否',
                },
                {
                  value: 1,
                  key: '是',
                },
              ],
            },
          ],
        },
        {
          name: '其他问题：',
          value: 'QTWT',
          children: [
            {
              name1: 'QTWT',
              value: 'QTWT',
              Checkbox: false,
            },
          ],
        },
        {
          name: '初步判定：',
          children: [
            {
              name1: '',
              value: 'CBJD',
              Checkbox: true,
              children: [
                {
                  value: '373',
                  key: '房屋基本安全(当房屋无以上情况且处于正常使用情况)',
                },
                {
                  value: '374',
                  key: '房屋存在安全隐患(当房屋存在一条及以上异常情况)',
                },
              ],
            },
          ],
        },
        {
          name: '照片',
          children: [{ name1: '' }],
        },
      ],
      ListDataS: [
        {
          name: '所属省：',
          isL: false,
          children: [
            {
              name1: '所属省：',
              value: 'province',
              Checkbox: false,
            },
          ],
        },
        {
          name: '所属市：',
          isL: false,
          children: [
            {
              name1: '所属市：',
              value: 'CITY',
              Checkbox: false,
            },
          ],
        },
        {
          name: '所属县：',
          isL: false,
          children: [
            {
              name1: '所属县：',
              value: 'COUNTY',
              Checkbox: false,
            },
          ],
        },
        {
          name: '所属镇：',
          isL: false,
          children: [
            {
              name1: '所属镇：',
              value: 'TOWN',
              Checkbox: false,
            },
          ],
        },
        {
          name: '所属村：',
          isL: false,
          children: [
            {
              name1: '所属村：',
              value: 'VILLAGE',
              Checkbox: false,
            },
          ],
        },
        {
          name: '产权人：',
          isL: false,
          children: [
            {
              name1: '产权人：',
              value: 'CQR',
              Checkbox: false,
            },
          ],
        },
        {
          name: '产权人身份证号：',
          isL: false,
          children: [
            {
              name1: '产权人身份证号：',
              value: 'SFZH',
              Checkbox: false,
            },
          ],
        },
        {
          name: '具体用途：',
          isL: false,
          children: [
            {
              name1: '具体用途：',
              value: 'JTYT',
              Checkbox: false,
            },
          ],
        },
        {
          name: '建筑层数：',
          isL: false,
          children: [
            {
              name1: '建筑层数：',
              value: 'JZCS',
              Checkbox: false,
            },
          ],
        },
        {
          name: '建筑面积：',
          isL: false,
          children: [
            {
              name1: '建筑面积：',
              value: 'JZMJ',
              Checkbox: false,
            },
          ],
        },
        {
          name: '建成时间：',
          isL: false,
          children: [
            {
              name1: '建成时间：',
              value: 'JCSJ',
              Checkbox: false,
            },
          ],
        },
        {
          name: '结构类型：',
          isL: true,
          children: [
            {
              name1: '结构类型：',
              value: 'JGLX',
              Checkbox: true,
              children: [
                {
                  value: '42',
                  key: '框架结构',
                },
                {
                  value: '43',
                  key: '砖混结构',
                },
                {
                  value: '44',
                  key: '木结构',
                },
                {
                  value: '163',
                  key: '其他',
                },
              ],
            },
          ],
        },
        {
          name: '周边情况：',
          isL: true,
          children: [
            {
              name1: '周边情况：',
              value: 'ZBQK',
              Checkbox: true,
              children: [
                {
                  value: '1',
                  key: '无异常',
                },
                {
                  value: '2',
                  key: '房屋周边地面长期积水',
                },
                {
                  value: '3',
                  key: '房屋周边有工程建设和深基坑施工情况',
                },
                {
                  value: '4',
                  key: '房屋周边有影响安全的危险因素（例如山体滑坡等）',
                },
                {
                  value: '5',
                  key: '有破墙开门、开窗或开店等影响结构安全的行为，或其他改变使用功能有较大变动情况',
                },
              ],
            },
          ],
        },
        {
          name: '地基基础：',
          isL: true,
          children: [
            {
              name1: '地基基础：',
              value: 'DJJC',
              Checkbox: true,
              children: [
                {
                  key: '无异常',
                  value: '1',
                },
                {
                  key: '房屋出现明显不均匀沉降（斜向）裂缝',
                  value: '2',
                },
                {
                  key: '外露基础明显腐蚀、酥碱、松散 和剥落',
                  value: '3',
                },
                {
                  key: '裂缝持续发展尚未稳定',
                  value: '4',
                },
                {
                  key: '出现明显倾斜',
                  value: '5',
                },
                {
                  key: '基础局部或整体塌陷的',
                  value: '6',
                },
              ],
            },
          ],
        },
        {
          name: '墙体：',
          isL: true,
          children: [
            {
              name1: '墙体：',
              value: 'QT',
              Checkbox: true,
              children: [
                {
                  key: '无异常',
                  value: '1',
                },
                {
                  key: '墙体开裂严重',
                  value: '2',
                },
                {
                  key: '墙体有歪斜',
                  value: '3',
                },
                {
                  key: '局部倒塌或有倒塌危险',
                  value: '4',
                },
              ],
            },
          ],
        },
        {
          name: '柱、梁、板：',
          isL: true,
          children: [
            {
              name1: '柱、梁、板：',
              value: 'ZLB',
              Checkbox: true,
              children: [
                {
                  key: '无异常',
                  value: '1',
                },
                {
                  key: '钢筋露筋、锈蚀,出现明显锈胀裂缝',
                  value: '3',
                },
                {
                  key: '梁柱有明显受力裂缝和变形',
                  value: '4',
                },
              ],
            },
          ],
        },
        {
          name: '楼屋面：',
          isL: true,
          children: [
            {
              name1: '楼屋面：',
              value: 'LWM',
              Checkbox: true,
              children: [
                {
                  key: '无异常',
                  value: '1',
                },
                {
                  key: '明显变形',
                  value: '2',
                },
                {
                  key: '明显裂缝',
                  value: '3',
                },
                {
                  key: '较严重渗漏',
                  value: '4',
                },
                {
                  key: '老化破损',
                  value: '5',
                },
              ],
            },
          ],
        },
        {
          name: '木架构：',
          isL: true,
          children: [
            {
              name1: '木架构：',
              value: 'MJG',
              Checkbox: true,
              children: [
                {
                  key: '无异常',
                  value: '1',
                },
                {
                  key: '明显腐朽或虫蛀',
                  value: '2',
                },
                {
                  key: '梁、橝跨中明显变形或出现横向裂纹',
                  value: '3',
                },
                {
                  key: '梁、橝端部出现劈裂',
                  value: '4',
                },
                {
                  key: '柱身有明显歪斜',
                  value: '5',
                },
                {
                  key: '木柱于柱基础之间错位',
                  value: '6',
                },
                {
                  key: '构件纵向有明显干缩裂缝',
                  value: '7',
                },
                {
                  key: '卯榫节点有破损或有拔榫迹象',
                  value: '8',
                },
                {
                  key: '承重柱存在接柱或转换情况且未采取可靠连接措施',
                  value: '9',
                },
              ],
            },
          ],
        },
        // {
        //   name: '照片',
        //   children: [{ name1: '' }],
        // },
      ],
      tableValus: [],
      formData: {},
      ListData: [
        {
          time: '2022年2月20日',
          Type: '网格员巡查',
          XCY: '张三',
          XCJL: '存在安全隐患',
          isActive: true,
          List: [],
        },
        {
          time: '2022年2月20日',
          Type: '网格员巡查',
          XCY: '张三',
          XCJL: '存在安全隐患',
          isActive: false,
          List: [],
        },
        {
          time: '2022年2月20日',
          Type: '网格员巡查',
          XCY: '张三',
          XCJL: '存在安全隐患',
          isActive: false,
          List: [],
        },
      ],
      heights: '',
      ListData1: [],
      DeepListData: [],
    }
  },
  methods: {
    /**
     *
     * @param {hezhilong}
     * 逻辑名称	物理名称	备注
排查人	PCR
排查时间	PCSJ
所属省	province
所属市	CITY
所属县	COUNTY
所属镇	TOWN
所属村	VILLAGE
产权人	CQR
产权人身份证号	SFZH
具体用途	JTYT
建筑层数	JZCS
建筑面积	JZMJ
建成时间	JCSJ
结构类型	JGLX	字典视图：b65d1943-66f4-49b1-b759-cd9f079dc0d3
枚举值：
42	框架结构
43	砖混结构
44	木结构
163	其他
周边情况	ZBQK	数据库存储的值：1：无异常 2：房屋周边地面长期积水；3：房屋周边有工程建设和深基坑施工情况；4：房屋周边有影响安全的危险因素（例如山体滑坡等）；5：有破墙开门、开窗或开店等影响结构安全的行为，或其他改变使用功能有较大变动情况。

地基基础	DJJC	同上，详见城乡房屋安全核查表
墙体	QT	同上，详见城乡房屋安全核查表
柱、梁、板	ZLB	同上，详见城乡房屋安全核查表
楼屋面	LWM	同上，详见城乡房屋安全核查表
木架构	MJG	同上，详见城乡房屋安全核查表

     */
    handleUp(data) {
      //由于嵌套层级很深导致页面动态刷新失败 使用this.$forceUpdate() 强制组件刷新一下
      this.$nextTick(() => {
        this.$set(data, 'isActive', !data.isActive)
        this.$forceUpdate() // 强制刷新组件
      })
      console.log(data)
      // this.show3 = !this.show3
    },
    getData: async function () {
      let accessCode = '688bd3883572440a859dfd8ba9194e7b'
      let params = {
        accessCode: accessCode,
        cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
        params: {
          dataguid: 'ef16ae26-894c-4f42-928e-0217985069cb',
          strParams: [],
        },
      }
      const res = await QuerySignCallback(params)
      this.ListData1 = JSON.parse(res.data.data).Data
      params.params.dataguid = 'a1b3ea56-a45a-462a-9459-e980c94004a2'
      const res1 = await QuerySignCallback(params)
      this.DeepListData = JSON.parse(res1.data.data).Data
      this.ListData1.forEach((item) => {
        item.List = this.ListDataS1
        item.isActive = false
      })
      this.DeepListData.forEach((item) => {
        item.List = this.ListDataS
        item.isActive = false
      })
      this.ListData1[0].isActive = true
      this.ListData1[0].QTWT = '测试'
      this.DeepListData[0].JGLX = '42'
      console.log(this.ListData1, this.DeepListData)
      this.$nextTick(() => {
        this.heights = this.$refs.ListDatas[0].offsetHeight + 'px'
      })
    },
  },
  mounted() {
    this.getData()
  },
}
</script>


<style lang="scss" scoped>
.historicalRecord {
  width: 100%;
  height: 92vh;
  overflow-y: auto;
  padding: 6px;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  .van-cell {
    padding: 6px 0;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
  }
  .List {
    padding-top: 18px;
  }
  .List-icon {
    float: left;
    width: 0.6rem;
    .splitLine {
      width: 1px;
      // height: 14rem;
      margin-top: unset;
      margin-left: 8px;
      border-left: 1px dashed black;
    }

    .splitLine:before {
      content: '';
      display: inline-block;
    }
  }
  .List-title {
    padding-left: 0.6rem;
    font-size: 14px;
    color: #007aff;
    line-height: 28px;
  }
  .List-Data {
    padding-left: 0.6rem;
    padding-top: 6px;
    font-size: 16px;
  }
  .content {
    padding-top: 6px;
    border-bottom: 1px solid black;
    p {
      font-size: 16px;
      font-weight: 800;
    }
  }
}
</style>

<style>
.historicalRecord .van-field__label {
  width: 10em !important;
  color: black;
}
</style>
